<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <!--3.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
    <script>
        $(function () {
            $("#save").click(function () {
                let user = {
                    username: $("#username").val(),
                    password: $("#password").val(),
                    name: $("#name").val(),
                    sex: $(".sex").val(),
                };
                let params = {
                    user: JSON.stringify(user)
                };
                $.post("http://127.0.0.1:8080/user/insert", params, function (result) {
                    if (result.status === 200) {
                        alert("注册成功");
                        window.location.href = "login.html";
                    } else {
                        alert("添加失败");
                    }
                })
            });
        })

        $(function () {
            $("#form-lg").bootstrapValidator(
                {
                    message: "数据格式不正确,请检查后再提交",
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },

                    fields: {
                        username: {
                            message: '用户必须是字母开头,长度不能小于8位',
                            validators: {
                                notEmpty: {
                                    message: "用户名不能为空"
                                },
                                regexp: {
                                    regexp: "^[a-zA-Z][a-zA-Z0-9]{7,16}$",
                                }
                            }
                        },
                        password: {
                            message: "密码格式不正确",
                            validators: {
                                notEmpty: {
                                    message: "密码不能为空"
                                },
                                stringLength: {
                                    min: 8,
                                    max: 18,
                                    message: "密码长度不能小于8位"
                                }
                            }
                        }
                    }
                })
        })
    </script>

</head>
<body>
<div>
    <div class="col-md-offset-4 col-lg-offset-4col-xl-offset-4">
        <span class="m-auto"><h1>用户注册页面</h1></span>
    </div>
    <div>
        <form id="form-lg" class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名：</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码：</label>
                <div class="col-sm-3">
                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名：</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="name" id="name" placeholder="姓名">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">性别：</label>
                <div class="col-sm-3">
                    <input type="radio" class="sex" name="sex" value="男" checked>男
                    <input type="radio" class="sex" name="sex" value="女">女
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input id="save" type="button" class="btn btn-default" value="提交">
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>